<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>查询发料单</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="query-issue">
      <search-btn-view immediate btn-text="发料单查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="approvalIssueList">批量审核</el-button>
          <el-button size="medium" type="primary" @click="printOrder">打印</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="query-issue-table-div">
        <el-table fit stripe border :data="issueList" style="width: 100%" height="parent">
          <checkbox-table-column width="70px" header-text="打印" check-field="id" @select-change="toSelectPrintIssue" fixed="left">
          </checkbox-table-column>
          <checkbox-table-column width="70px" header-text="审批" :selectable="approvalSelectable" check-field="id" @select-change="toSelectIssue"
            fixed="left"></checkbox-table-column>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="typeText" label="类型" min-width="100px" align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="status" label="状态" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{i18n.getMsg(`returnOrder.status.${props.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="count" label="数量" min-width="100px" align="center"></el-table-column>
          <el-table-column sortable prop="selfOutFuCount" label="交接数(付)" min-width="100px" align="center">
          </el-table-column>
          <el-table-column sortable prop="feedTotal" label="订单投料数" min-width="120px" align="center"></el-table-column>
          <el-table-column sortable prop="inOutUnit" label="单位" min-width="100px" align="center"></el-table-column>
          <el-table-column sortable prop="companyOrderId" label="订单编号" min-width="130px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="factoryNo" label="工厂型号" min-width="125px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="customerNo" label="客户型号" min-width="125px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="providerName" label="供应商" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialName" label="物料名称" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="model" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="color" label="编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialDeptName" label="物料部门" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="providerNo" label="供方编号" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="defaultWarehouse" label="默认仓库" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="createUser" label="制单人" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="createTime" label="制单日期" width="100px" align="center">
            <template slot-scope="props">
              <span>{{moment(props.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="approvalUser" label="审核人" min-width="120px" header-align="center">
            <template slot-scope="props">
              <div v-if="props.row.status===0">
                <template v-if="props.row.auditorUser!==''">
                  <el-tooltip placement="top" :enterable="false">
                    <div slot="content">
                      {{props.row.auditorUser}}
                    </div>
                    <div style="color:#409EFF">查看可审核人</div>
                  </el-tooltip>
                </template>
                <div v-else>暂无可审核人</div>
              </div>
              <div v-else>{{props.row.approvalUser}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="approvalTime" label="审核日期" width="100px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.approvalTime!==null">{{moment(props.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="150px" header-align="center"></el-table-column>
          <el-table-column fixed="right" :resizable="false" label="操作" :width="operationWidth" header-align="center">
            <template slot-scope="props" v-if="props.row.status===0">
              <template v-if="props.row.isApperval===1">
                <el-button size="mini" type="primary" @click="approvalIssue(props.row,1)">审核</el-button>
                <el-button size="mini" type="danger" @click="approvalIssue(props.row,2)">退回</el-button>
              </template>
              <template v-if="props.row.isCreate===1">
                <el-button size="mini" type="primary" @click="updateIssue(props.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteIssue(props.row)">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <prompt-form title="修改发料单" :visible.sync="openUpdateForm" :option="updateOption" :data="selectIssue" width="250px" @close="selectIssue=null"
      @ensure="toUpdateIssue"></prompt-form>
    <el-dialog fullscreen class="dialog-fullscreen" title="打印预览" :visible.sync="openPrintDialog">
      <div style="height:100%;overflow:auto;position: relative;">
        <print-order v-if="openPrintDialog" :orders="printIssueList"></print-order>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190416085621dom-to-image.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/promptForm.css",
    "/vueSystem/components/css/showTextarea.css",
    "/vueSystem/components/css/vueEditor.css",
    "/vueSystem/mixins/printOrderConfigButton.css",
    "../mixins/issueOrderPrint.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/dropdownUtil.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/checkboxTableColumn.js",
    "/vueSystem/components/promptForm.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/components/config/templateColumnConfig.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/models/templateConfig.js",
    "/vueSystem/js/commonTemplateUtil.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/mixins/printCommonOrderMixin.js",
    "/vueSystem/mixins/printOrderMixin.js"
  ]);

</script>
<script src="./searchForm.js"></script>
<script src="../mixins/printIssueOrderTemplMixin.js"></script>
<script src="./printOrder.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin(),
      printOrderMixin('issueOrder')
    ],

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        colorDescription: '',
        providerName: '',
        materialDept: '',
        companyOrderId: '',
        orderId: '',
        factoryNo: '',
        customerNo: '',
        providerNo: '',
        status: '',
        deptWork: [],
        startDate: null,
        endDate: null
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        issueList: [],
        operationWidth: '70px',
        selectIssueList: [],
        printIssueList: [],
        openUpdateForm: false,
        selectIssue: null,
        updateOption: {
          formItems: []
        },
        i18n: i18n,
        moment: moment
      };
    },

    methods: {
      setIssueList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize,
          sourceType: 1
        };

        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'orderId',
          'companyOrderId', 'factoryNo', 'customerNo', 'providerNo', 'status'
        ];
        var search = this.search;
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        var deptWork = search.deptWork;
        if (deptWork.length > 0) {
          postData.pickingPeople = deptWork[deptWork.length - 1];
        }

        var startDate = search.startDate;
        if (startDate !== null) {
          postData.startDate = moment(startDate).format('YYYY-MM-DD');
        }

        var endDate = search.endDate;
        if (endDate !== null) {
          postData.endDate = moment(endDate).format('YYYY-MM-DD');
        }

        this.loading = true;
        var self = this;
        ajaxRequest("issueNote/getIssueNoteData", postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var issueList = res.returnData;
          for (var i = 0; i < issueList.length; i++) {
            var issue = issueList[i];
            var createTime = issue.createTime;
            issue.createTime = moment(createTime).valueOf();

            var approvalTime = issue.approvalTime;
            if (SysUtil.isEmpty(approvalTime)) {
              approvalTime = null;
            } else {
              approvalTime = moment(approvalTime).valueOf();
            }
            issue.approvalTime = approvalTime;

            var auditableUser = issue.auditableUser;
            if (SysUtil.isEmpty(auditableUser)) {
              issue.auditorUser = '';
            } else {
              issue.auditorUser = auditableUser.join(',');
            }
            SysUtil.tableSetDeptData(issue);

            var typeText = issue.typeText;
            if (['车间交入','出库到车间'].indexOf(typeText) !== -1) {
              var workShopName = issue.workShopName;
              if (!SysUtil.isEmpty(workShopName)) {
                issue.typeText = workShopName;
              }
            }
          }

          self.issueList = issueList;
          self.selectIssueList = [];
          self.printIssueList = [];
          self.pagination.totalCount = res.iTotalRecords;
          self.setOperationWidth();
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setIssueList(true);
      },

      pageChange: function () {
        this.setIssueList();
      },

      toSelectIssue: function (ids, issueList) {
        this.selectIssueList = issueList;
      },

      toSelectPrintIssue: function (ids, issueList) {
        this.printIssueList = issueList;
      },

      approvalSelectable: function (issue) {
        return issue.status === 0 && issue.isApperval === 1;
      },

      approvalIssueList: function () {
        var selectIssueList = this.selectIssueList;
        if (selectIssueList.length === 0) {
          this.$alert('请选择需要审核的发料单', '信息')
          return;
        }

        selectIssueList = _.map(selectIssueList, function (issue) {
          return {
            id: issue.id,
            isApproval: 1
          };
        });

        var postData = {
          status: 1,
          ids: JSON.stringify(selectIssueList)
        };
        this.approvalMethod(postData, "warehouse/approvalAllWarehouse");
      },

      approvalIssue: function (issue, status) {
        var postData = {
          id: issue.id,
          status: status,
          isApproval: 1
        }

        if (status === 1) {
          this.approvalMethod(postData, 'warehouse/approvalWarehouse');
        } else {
          this.toRefuseIssue(postData);
        }
      },

      approvalMethod: function (postData, requestUrl) {
        this.loading = true;
        var self = this;
        ajaxRequest(requestUrl, postData).then(function (msg) {
          self.loading = false;
          if (msg.indexOf("重新确认") === -1) {
            self.$alert(msg, '信息', {
              callback: function () {
                self.setIssueList();
              }
            });
            return;
          }

          self.$confirm('物料出库后,是否交接到车间', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            showClose: false,
            type: 'info'
          }).then(function () {
            postData.isTcy = 1;
            self.againApprovalMethod(postData, requestUrl);
          }).catch(function () {
            postData.isTcy = 2;
            self.againApprovalMethod(postData, requestUrl);
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      againApprovalMethod: function (postData, requestUrl) {
        this.loading = true;
        var self = this;
        ajaxRequest(requestUrl, postData).then(function (msg) {
          self.loading = false;
          self.$alert(msg, '信息', {
            callback: function () {
              self.setIssueList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toRefuseIssue: function (postData) {
        var self = this;
        this.$prompt('请输入退回理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(function (data) {
          var value = data.value;
          if (value !== '') {
            postData.approvalReason = value;
          } else {
            postData.approvalReason = "退回";
          }

          self.loading = true;
          ajaxRequest('warehouse/approvalWarehouse', postData).then(function (msg) {
            self.loading = false;
            self.$alert(msg, '信息', {
              callback: function () {
                self.setIssueList();
              }
            });
          }).catch(function () {
            self.loading = false;
          });
        }).catch(function () {});
      },

      updateIssue: function (issue) {
        var precision = SysUtil.getMaterialNumberPrecision(issue.inOutUnit, 4);
        var formItems = [{
          type: 'number',
          field: 'count',
          label: '出入库数量',
          isRequired: true,
          precision: precision,
          min: 1 / Math.pow(10, precision)
        }];

        var selfOutFuCount = issue.selfOutFuCount;
        if (!SysUtil.isEmpty(selfOutFuCount) && selfOutFuCount !== 0) {
          formItems.push({
            type: 'number',
            field: 'selfOutFuCount',
            label: '交接数(付)',
            isRequired: true,
            precision: 0,
            min: 1
          });
        }

        this.updateOption.formItems = formItems;
        this.selectIssue = issue;
        this.openUpdateForm = true;
      },

      toUpdateIssue: function (inputData) {
        var postData = {};
        for (var key in inputData) {
          var value = inputData[key];
          if (value === undefined) {
            var msg = i18n.getMsg(`returnOrder.error.${key}`);
            this.$alert(msg, '信息');
            return;
          }
          postData[key] = value;
        }

        var issue = this.selectIssue;
        var isSame = SysUtil.hasSameProperty(postData, issue);
        if (isSame) {
          this.openUpdateForm = false;
          this.$alert('发料单修改成功', '信息');
          return;
        }

        postData.id = issue.id;
        this.loading = true;
        var self = this;
        ajaxRequest('warehouse/updateWarehouse', postData).then(function (msg) {
          self.$alert(msg, '信息', {
            callback: function () {
              self.setIssueList();
            }
          });
          self.openUpdateForm = false;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      deleteIssue: function (issue) {
        var self = this;
        this.$confirm('确定要删除此发料单吗?', '提示').then(function () {
          self.toDeleteIssue(issue);
        }).catch(function () {});
      },

      toDeleteIssue: function (issue) {
        this.loading = true;
        var self = this;
        ajaxRequest('warehouse/deleteWarehouse', {
          id: issue.id,
          warehouse: issue.warehouse
        }).then(function (msg) {
          self.$alert(msg, '信息', {
            callback: function () {
              self.setIssueList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      setOperationWidth: function () {
        var issueList = this.issueList;
        var btnNum = 0;
        for (var i = 0; i < issueList.length; i++) {
          if (btnNum === 2) {
            break;
          }

          var issue = issueList[i];
          if (issue.status !== 0) {
            continue;
          }
          var num = 0;
          if (issue.isApperval === 1) {
            num++;
          }
          if (issue.isCreate === 1) {
            num++;
          }
          btnNum = Math.max(btnNum, num);
        }

        var width = 10;
        if (btnNum === 1) {
          width += 115;
        } else if (btnNum === 2) {
          width += 235;
        } else {
          width = 70;
        }
        this.operationWidth = width + 'px';
      },

      printOrder: function () {
        var printIssueList = this.printIssueList;
        if (printIssueList.length === 0) {
          this.$alert('请选择需要打印的发料单', '信息');
          return;
        }

        this.toPreviewTemplateOrder();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      CheckboxTableColumn: CheckboxTableColumn,
      PromptForm: PromptForm,
      PrintOrder: PrintOrder
    }
  });

</script>

<style>
  .query-issue {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .query-issue .query-issue-table-div {
    flex: 1;
    overflow: auto;
  }

  .query-issue .query-issue-table-div .el-button+.el-button {
    margin-left: 0;
  }

</style>

</html>
